<template>
    <div>
      <headeBar></headeBar>
      <div class="container">
        <el-container>
          <sidebar :activeIndex="activeIndex"></sidebar>
          <el-main class="container-content">
            <el-row>
              <el-col :span="2"><el-button type="primary" round @click="addStock"><i class="el-icon-circle-plus-outline" style="font-size: 15px"></i><span>添加</span></el-button></el-col>
            </el-row>
            <el-table :data="stockList" border height="430" :row-class-name="tableRowClass" style="width: 100%; margin-top:10px;" >
              <el-table-column prop="code" label="零件编号"  align="center"/>
              <el-table-column prop="name" align="center"  label="零件名" />
              <el-table-column prop="stock" align="center" label="库存" />
              <el-table-column prop="threshold" align="center" label="警戒值" />
              <el-table-column prop="unit" align="center" label="计量单位" />
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button @click="editStock(scope)" type="text" size="middle">修改</el-button>
                  <el-button @click="delStock(scope)" type="text" size="middle">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!--新增/修改库存模态框-->
            <el-dialog :title=formTitle :visible.sync="editStockDialogVisible" >
              <el-form  :model="form" status-icon ref="form">
                <el-form-item label="零件编号" label-width="120px" >
                  <el-input  v-model="form.code"  autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="零件名" label-width="120px" >
                  <el-input  v-model="form.name"  autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="库存" label-width="120px" >
                  <el-input  v-model="form.stock" @keyup.native="allowNumber1"  autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="警戒值" label-width="120px" >
                  <el-input  v-model="form.threshold" @keyup.native="allowNumber2" autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="计量单位" label-width="120px" >
                  <el-input  v-model="form.unit" autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="editStockDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="postStockForm" v-show="!ifEdit">确 定</el-button>
                <el-button type="primary" @click="putStockForm" v-show="ifEdit">确 定</el-button>
              </div>
            </el-dialog>
          </el-main>
        </el-container>
      </div>
    </div>
</template>

<script src="./initStock.js">

</script>

<style scoped>

</style>
